<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>URL查询参数介绍及使用</title>
  </head>
  <body>
    <button class="btn">获取城市数据并渲染</button>
    <!-- 1. 导包 -->
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <!-- 
    城市数据:http://hmajax.itheima.net/api/city
      获取某个省所有的城市
      查询参数名:pname
      说明:传递省份或直辖市名比如 北京、广东省…
    需求: 点击按钮 通过axios 获取某个省的城市 并输出
    -->
    <script>
        document.querySelector('.btn').addEventListener('click',() => {
            // console.log('按钮点了')
            // 通过 axios 获取某个省的城市 并输出 或 渲染
            axios({
                url:'http://hmajax.itheima.net/api/city',
                // url:'http://hmajax.itheima.net/api/city?pname=黑龙江省'
                // 开发中 一般用 params 不需要自己拼接字符串  避免出错
                params:{
                    pname:'香港特别行政区'
                }
            }).then(res => {
                console.log(res.data)
            })
        })
    </script>
  </body>
</html>
